<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>


<script src="resources/metrostyle/jquery/jquery.js"
	type="text/javascript"></script>


<!-- Metro-UI-CSS-master -->
<script src="resources/Metro-UI-CSS-master/jquery.widget.min.js"></script>
<link rel="stylesheet"
	href="resources/Metro-UI-CSS-master/css/metro-bootstrap.css">

<script src="resources/Metro-UI-CSS-master/min/metro.min.js"></script>
<script src="resources/Metro-UI-CSS-master/js/metro-dropdown.js"></script>


<!--  calendar -->
<script
	src="resources/Metro-UI-CSS-master/docs/js/metro/metro-calendar.js"></script>
<script
	src="resources/Metro-UI-CSS-master/docs/js/metro/metro-datepicker.js"></script>
<!-- fin calendar -->
<!--  fin Metro-UI-CSS-master -->
<!--  calendar -->
<script
	src="resources/Metro-UI-CSS-master/docs/js/metro/metro-calendar.js"></script>
<script
	src="resources/Metro-UI-CSS-master/docs/js/metro/metro-datepicker.js"></script>
<!-- fin calendar -->



<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">


<script>
	$(document).ready(function() {

		$('.tabla').hide();
		$('.comboDias').hide();

	});

	function buscarEmpleado() {

		var legajo = $("#combo :selected").attr('legajo');
		var nombre = $("#combo :selected").attr('nombre');
		var sector = $("#combo :selected").attr('sector');
		var tarjeta = $("#combo :selected").attr('tarjeta');
		var equipo = $("#combo :selected").attr('equipo');

		$('#legajo').val(legajo);
		$('#nombre').val(nombre);
		$('#sector').val(sector);
		$('#tarjeta').val(tarjeta);
		$('#equipo').val(equipo);

		$.ajax({
			type : "POST",
			traditional : true,
			url : "getDiasUsuario.htm",
			data : "legajo=" + legajo,

			success : function(response) {
				// we have the response
				$('.comboDias').empty();
				$('.comboDias').append(response);

			},
			error : function(response) {
				console.log(response);

			}
		});

		$('.comboDias').show();
	}
	
	
	function mostrarTabla(){
		var legajo = $("#combo :selected").attr('legajo');
		
		$.ajax({
			type : "POST",
			traditional : true,
			url : "getTablaUsuario.htm",
			data : "legajo=" + legajo,

			success : function(response) {
				// we have the response
				$('#tabla').empty(response);
				$('#tabla').append(response);

			},
			error : function(response) {
				console.log(response);

			}
		});
		
	}
	
	
	
	
</script>

<title>Insert title here</title>
</head>
<body class="metro">
	<div class="grid">
		<div class="row">
			<div class="span6 offset4">
				<div class="example">
					<form>
						<fieldset>
							<div class="tab-content-segment">


								<legend>Seleccionar Empleado</legend>
								<select id="combo">
									<c:forEach var="empleado" items="${listaEmpleados}">
										<option onClick="buscarEmpleado()" nombre="${empleado.nombre}"
											tarjeta="${empleado.tarjeta}" equipo="${empleado.equipo}"
											sector="${empleado.sector}" legajo="${empleado.legajo}">${empleado.nombre}</option>
									</c:forEach>
								</select>


							</div>

							<legend>Dias trabajados</legend>
							<label>Numero de lgajo</label>
							<div data-role="input-control" class="input-control text">
								<input type="text" id="legajo" class="ntext"
									placeholder="Escriba texto">
								<button tabindex="-1" class="btn-clear" type="button"></button>
							</div>
							<label>Nombre</label>
							<div data-role="input-control" class="input-control text">
								<input type="text" id="nombre" class="ntext"
									placeholder="Escriba texto">
								<button tabindex="-1" class="btn-clear" type="button"></button>
							</div>
							<label>Tarjeta</label>
							<div data-role="input-control" class="input-control text">
								<input type="text" id="tarjeta" class="ntext"
									placeholder="Escriba texto">
								<button tabindex="-1" class="btn-clear" type="button"></button>
							</div>
							<label>Sector</label>
							<div data-role="input-control" class="input-control text">
								<input type="text" id="sector" class="ntext"
									placeholder="Escriba texto">
								<button tabindex="-1" class="btn-clear" type="button"></button>
							</div>
							<label>equipo</label>
							<div data-role="input-control" class="input-control text">
								<input type="text" id="equipo" class="ntext"
									placeholder="Escriba texto">
								<button tabindex="-1" class="btn-clear" type="button"></button>
							</div>
							<div class="comboDias"></div>


							<div id="tabla">
							
							
							
							</div>
				</div>

				<div>

					<input type="button" onclick="validar()" value="aceptar" )/>
				</fieldset>
				</form>
			</div>

		</div>
	</div>
	</div>

</body>
</html>